<template>
  <!-- 右侧 -->
  <div class="material_right">
    <div class="mlr_40 mt_30">
      <!-- title -->
      <div class="dis_f pb_29 bor_bottom">
        <div class="actives ml_7"></div>
        <div class="color_333 font_18">个人资料</div>
      </div>
      <!-- 基本 -->
      <div class="message pb_29 bor_bottom">
        <div class="dis_f_j_b mt_23">
          <div class="mt_7 color_333 font_16">
            <span class="bor_bb">基本</span>信息
            <span class="ml_10 color_FF1717 font_14">标注*的为必填项</span>
          </div>
          <div class="buttonsubmit">编辑</div>
        </div>
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 姓名 -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span> 姓
              <span class="ml_15">名：</span>
            </div>
            <div>
              <el-input  v-model="input1" placeholder="请输入内容"></el-input>
            </div>
            <!-- 姓名 -->
          </div>
          <div>
            <div class="dis_f ml_60">
              <!-- 性别 -->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span> 性
                <span class="ml_15">别：</span>
              </div>
              <div class="mt_5">
                <el-radio v-model="radio" label="1">男</el-radio>
                <el-radio v-model="radio" label="2">女</el-radio>
              </div>
              <!-- 性别 -->
            </div>
          </div>
        </div>
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 昵称 -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span> 昵
              <span class="ml_15">称：</span>
            </div>
            <div>
              <el-input  v-model="input1" placeholder="请输入内容"></el-input>
            </div>
            <!-- 昵称 -->
          </div>
          <div>
            <div class="dis_f ml_60">
              <!-- 年龄 -->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span> 年
                <span class="ml_15">龄：</span>
              </div>
              <div>
                <el-input  v-model="input1" placeholder="请输入您的年龄"></el-input>
              </div>
              <!-- 年龄 -->
            </div>
          </div>
        </div>
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 证件类型: -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span>
              证件类型：
            </div>
            <div>
              <el-input  v-model="input1" placeholder="请选择证件类型"></el-input>
            </div>
            <!-- 证件类型: -->
          </div>
          <div>
            <div class="dis_f ml_60">
              <!-- 最高学历    -->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span>
                最高学历：
              </div>
              <div>
                <el-input  v-model="input1" placeholder="请输入您的学历"></el-input>
              </div>
              <!--  -->
            </div>
          </div>
        </div>
        <!--  -->
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!--  证件类型:-->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span>
              证件号码：
            </div>
            <div>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!-- 证件类型: -->
          </div>
          <div>
            <div class="dis_f ml_60">
              <!-- 出生日期:-->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span>
                出生日期：
              </div>
              <div>
                 <el-select v-model="value" placeholder="选择您的出生日期">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
               
              </div>
              <!-- 最高学历 -->
            </div>
          </div>
        </div>
        <!--  -->
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 户口地址： -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span> 户口地址：
            </div>
            <div>
              <el-select v-model="value" placeholder="请选择户口所在地">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!-- 户口地址： -->
          </div>
        </div>
        <!--  -->
        <!--  -->
        <div class="dis_f">
          <div class="dis_f">
            <!-- 个性签名: -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span> 个性签名：
            </div>
            <div>
              <textarea></textarea>
            </div>
            <!-- 户口地址： -->
          </div>
        </div>
        <!--  -->
      </div>
      <!-- 基本 -->
      <!-- 联系信息 -->
      <div class="message pb_80">
        <div class="dis_f_j_b mt_23">
          <div class="mt_7 color_333 font_16">
            <span class="bor_bb">联系</span>信息
            <span class="ml_10 color_FF1717 font_14">标注*的为必填项</span>
          </div>
          <div class="buttonsubmit">编辑</div>
        </div>
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 手机号 -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span> 手
              <span class="ml-8 mr_10">机</span> 号：
            </div>
            <div>
              <el-input v-model="input1" placeholder="请输入内容"></el-input>
            </div>
            <!-- 手机号 -->
          </div>
          <div>
            <div class="dis_f ml_60">
              <!-- 座机号 -->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span> 座
                <span class="ml-8 mr_10">机</span> 号：
              </div>
              <div>
                <el-input  v-model="input1" placeholder="请输入内容"></el-input>
              </div>
              <!-- 手机号 -->
            </div>
          </div>
        </div>
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 昵称 -->
            <div class="font_14 color_333 mt_5 ml_-23">
              <span class="color_FF1717">*</span>
              紧急联系人：
            </div>
            <div>
              <el-input  v-model="input1" placeholder="请输入内容"></el-input>
            </div>
            <!-- 昵称 -->
          </div>
          <div>
            <div class="dis_f mrs-23">
              <!-- 年龄 -->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span> 紧急联系人电话：
              </div>
              <div>
                <el-input  v-model="input1" placeholder="请输入您的年龄"></el-input>
              </div>
              <!-- 年龄 -->
            </div>
          </div>
        </div>
        <!--  -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 箱: -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span> 邮
              <span class="ml_15">箱：</span>
            </div>
            <div>
             <el-select v-model="value" placeholder="请选择户口所在地">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!-- 证件类型: -->
          </div>
          <div>
            <div class="dis_f ml_60">
              <!-- 最高学历    -->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span>
                办公电话：
              </div>
              <div>
                <el-input v-model="input1" placeholder="请输入您的学历"></el-input>
              </div>
              <!--  -->
            </div>
          </div>
        </div>
        <!--  -->
        <!-- qq -->
        <div class="dis_f" style="height:50px">
          <div class="dis_f">
            <!-- 箱: -->
            <div class="font_14 color_333 mt_5">
              <span class="color_FF1717">*</span> Q
              <span class="ml_10 mr_10">Q</span>
              号：
            </div>
            <div>
              <el-input v-model="input1" placeholder="请选择证件类型"></el-input>
            </div>
            <!-- 证件类型: -->
          </div>
          <div>
            <div class="dis_f ml_60">
              <!-- 最高学历    -->
              <div class="font_14 color_333 mt_5">
                <span class="color_FF1717">*</span> 微
                <span class="ml_15">信：</span>
              </div>
              <div>
                <el-input v-model="input1" placeholder="请输入您的学历"></el-input>
              </div>
              <!--  -->
            </div>
          </div>
        </div>
        <!--  -->
      </div>
      <!-- 联系信息 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      radio: "1",
      textarea: ""
    };
  },
  methods: {}
};
</script>

<style scoped lang='less'>
.mb_40{
margin-bottom: 40px;
}
.bor_bb{
  border-bottom: 3px solid #27A4FE ;
}
 .el-input__inner {
    height: 38px ;
  line-height: 38px !important;
}
.el-input--small .el-input__inner{
  height: 38px !important; 
  line-height: 38px !important;
}
.el-select{
  width: 256px;
}
.el-textarea {
  width: 639px;
  height: 94px;
}
.ml_-23 {
  margin-left: -13px;
}
.mrs-23 {
  margin-left: 18px;
}
.pb_80 {
  padding-bottom: 80px;
}
textarea {
  width: 639px;
  height: 94px;
  border: 1px solid rgba(193, 193, 193, 0.4);
  border-radius: 5px;
}
.mr_10 {
  margin-right: 5px;
}
.ml-8 {
  margin-left: 5px;
}
.ml_60 {
  margin-left: 60px;
}
.mt_5 {
  margin-top: 8px;
}
.el-el-input {
  width: 257px;
}
.el-input{
  width: 257px;
  height: 38px;
}
.mesginput {
  width: 257px;
  height: 38px;
  border: 1px solid rgba(193, 193, 193, 0.5);
}
.color_FF1717 {
  color: #ff1717;
}
.mt_23 {
  margin-top: 23px;
}

.buttonsubmit {
  width: 76px;
  height: 34px;
  background: rgba(39, 164, 254, 1);
  color: #fff;
  display: block;
  text-align: center;
  line-height: 34px;
  border: none;
}
.ml_15 {
  margin-left: 25px;
}
.color_F1616 {
  color: #ff1616;
}
.ml_10 {
  margin-left: 10px;
}
.color_999 {
  color: #999;
}
.ml_23 {
  margin-left: 23px;
}
.ml {
  margin-left: 10px;
}
.color {
  color: #27a4fe;
}
.font_14 {
  font-size: 14px;
}
.color_666 {
  color: #666;
}
.bj {
  background: #f3f3f3;
  overflow: hidden;
  padding-bottom: 34px;
}
.ml_30 {
  margin-left: 28px;
}
.mt_30 {
  margin-top: 30px;
}
.material_left {
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.portrait_images {
  width: 74px;
  height: 85px;
  margin: auto;
  border: 1px solid;
  margin-top: 30px;
}
.telephone {
  font-size: 16px;
  color: #444343;
  margin-top: 17px;
  text-align: center;
}
.text {
  color: #999;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.edit_img {
  text-align: center;
  padding-top: 11px;
}
.el-menu-item.is-active {
  color: #27a4fe;
  border-left: 2px solid #27a4fe;
  background: rgba(39, 164, 254, 0.1);
}
.ml_7 {
  margin-right: 7px;
}
.mt_50 {
  margin-top: 50px;
}
.el-menu-item {
  text-align: center;
}
.material_right {
  width: 957px;
  height: 929px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.mlr_40 {
  margin-left: 40px;
  margin-right: 40px;
}
.actives {
  width: 4px;
  height: 18px;
  background: rgba(39, 164, 254, 1);
  margin-top: 4px;
}
.dis_f {
  display: flex;
}
.pb_29 {
  padding-bottom: 29px;
}
.bor_bottom {
  border-bottom: 1px dashed rgba(153, 153, 153, 0.1);
}
.color_333 {
  color: #333;
}
.font_18 {
  font-size: 18px;
}
.font_16 {
  font-size: 16px;
}
.dis_f_j_b {
  display: flex;
  justify-content: space-between;
}
.mt_38 {
  margin-top: 30px;
}
.mt_10 {
  margin-top: 10px;
}
.ma_button {
  width: 88px;
  height: 34px;
  border: 1px solid rgba(39, 164, 254, 1);
  color: #27a4fe;
  line-height: 34px;
  text-align: center;
}
</style>